<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<view class="header">
			<text class="app-title">直求</text>
			
			<view class="header-icons">
				<view class="notification" @tap="goToNotifications">
					<image class="noti-icon" src="/static/icons/bell.png"></image>
					<view class="badge" v-if="notificationCount > 0">{{ notificationCount }}</view>
				</view>
				<view class="message" @tap="goToMessages">
					
					<image class="msg-icon" src="/static/icons/message.png"></image>
					<view class="badgex" v-if="messagesx > 0">{{ messagesx }}</view>
				</view>
			</view>
		</view>
		
		<!-- 搜索区域 -->
		<view class="search-container">
			<view class="search-box" @tap="goToSearch">
				<image class="search-icon" src="/static/icons/search.png"></image>
				<text class="search-placeholder">搜索招标项目、服务商...</text>
			</view>
		</view>
		
		<!-- 行业板块 - 新卡片样式 -->
		<view class="category-cards" >
			<!-- 工业板块 -->
			<view class="category-card" @tap="goCategoryDetail(categories[index])" v-for="(item,index) in blocksx" :key="index">
				<!-- <view class="card-icon-container industrial">
					<image class="card-icon" :src="item.icon"></image>
				</view> -->
				<view class="card-content">
					<text class="card-title">{{item.name}}</text>
					<!-- <text class="card-desc">工厂设备、原材料采购、工业服务等</text> -->
				</view>
				<!-- <image class="card-arrow" src="/static/icons/arrow-left.png"></image> -->
			</view>
			
		</view>
		<TabBar>
			
		</TabBar>
	</view>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue';
import TabBar from "../../components/TabBar.vue"
import { onLoad} from '@dcloudio/uni-app'


import { useMainStore } from '@/store'
const store = useMainStore()
  console.log(Object.keys(store)) // 检查所有可用方法   
	console.log('Store 原型:', Object.getPrototypeOf(store))
console.log(store.title) // 直接访问
const info =  uni.getStorageSync("info")
onMounted(() => {
	console.log("页面初次渲染")
  
  //store.initWebSocket("")
})
watch(
  () => store.messages, // 监听整个对象或具体属性
  (newVal) => {
    console.log('有新信息更新:', newVal);
	uni.vibrateLong({
		success: function () {
			console.log('有新消息来了');
		}
	});

	console.log('新信息类型:', typeof(newVal) );
	 messagesx.value = newVal.length
  },
  { deep: true } // 深度监听对象内部变化
);
// Notification count
const notificationCount = ref(3);
const messagesx = ref(0)
const blocksx = ref([
	{
		id: 1,
		name: '工业标单需求',
		icon: '/static/icons/category/industrial.png'
	},
	{
		id: 2,
		name: '美食娱乐需求',
		icon: '/static/icons/category/restaurant.png'
	},
	{
		id: 3,
		name: '汽车标单需求',
		icon: '/static/icons/category/hr.png'
	},
	{
		id: 4,
		name: '房产标单需求',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 5,
		name: '电子标单需求',
		icon: '/static/icons/category/more.png'
	},
	
	
	{
		id: 6,
		name: '酒店民宿需求',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 7,
		name: '服装鞋帽需求',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 8,
		name: '装修需求需求',
		icon: '/static/icons/category/more.png'
	},
	
	
	{
		id: 9,
		name: '医疗服务需求',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 10,
		name: '人力服务需求',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 11,
		name: '二手求购需求',
		icon: '/static/icons/category/more.png'
	},
	
	
	{
		id: 12,
		name: '绣球相亲需求',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 13,
		name: '机票出行需求',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 14,
		name: '其它需求',
		icon: '/static/icons/category/more.png'
	}
])
// Categories
const categories = ref([
	{
		id: 1,
		name: '工业标单',
		icon: '/static/icons/category/industrial.png'
	},
	{
		id: 2,
		name: '美食娱乐',
		icon: '/static/icons/category/restaurant.png'
	},
	{
		id: 3,
		name: '汽车标单',
		icon: '/static/icons/category/hr.png'
	},
	{
		id: 4,
		name: '房产标单',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 5,
		name: '电子标单',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 6,
		name: '酒店民宿',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 7,
		name: '服装鞋帽',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 8,
		name: '装修需求',
		icon: '/static/icons/category/more.png'
	},
	
	
	{
		id: 9,
		name: '医疗服务需求',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 10,
		name: '人力服务',
		icon: '/static/icons/category/more.png'
	},
	
	{
		id: 11,
		name: '二手求购',
		icon: '/static/icons/category/more.png'
	},
	
	
	{
		id: 12,
		name: '绣球相亲',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 13,
		name: '机票出行',
		icon: '/static/icons/category/more.png'
	},
	{
		id: 14,
		name: '其它',
		icon: '/static/icons/category/more.png'
	}
]);

// Methods
const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	});
};
 
const goToNotifications = () => {
	uni.navigateTo({
		url: '/pages/notifications/notifications'
	});
};

const goToMessages = () => {
	uni.switchTab({
		url: '/pages/message/message-list'
	});
};

const goCategoryDetail = (category) => {
	console.log("点击了吗？")
	uni.navigateTo({
		url: `/pages/index/index-detail?id=${category.id}&name=${encodeURIComponent(category.name)}`
	});
};
onLoad(()=>{
	console.log("适合请求数据",)
	store.initWebSocket(`ws://115.190.38.218/go/ms/ws?userID=${info.id_card}`)
	
	// uni.request({
	// 	url:"http://115.190.38.218/go/api/v1/categories",
		
	// 	method:'GET',
	// 	success: (res) => {
	// 		console.log("成功获取到数据22",res.data.data)
	// 		blocksx.value = res.data.data
	// 	},
	// 	fail: (err) => {
	// 		console.log("请求失败",err)
	// 	}
	// })
})
</script>

<style scoped>

.message{
		margin-top: 40rpx;
	}
.home-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 40rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	background-color: #1d4ed8;
}

.app-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #fff;
}

.header-icons {
	display: flex;
	align-items: center;
	gap: 40rpx;
}

.notification, .message {
	position: relative;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.noti-icon, .msg-icon {
	width: 44rpx;
	height: 44rpx;
}

.badge {
	position: absolute;
	top: -6rpx;
	right: -6rpx;
	background-color: #ef4444;
	color: #fff;
	font-size: 20rpx;
	min-width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
}

.badgex {
	position: absolute;
	top: -8rpx;
	right: -4rpx;
	background-color: #ef4444;
	color: #fff;
	font-size: 20rpx;
	min-width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
}

.search-container {
	padding: 0rpx 40rpx 20rpx;
	background-color: #1d4ed8;
}

.search-box {
	height: 80rpx;
	background-color: #fff;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.search-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 20rpx;
}

.search-placeholder {
	color: #999;
	font-size: 28rpx;
}

/* 新卡片样式 */
.category-cards {
	padding: 30rpx 40rpx;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(250rpx,1fr));
	gap: 30rpx;
}

.category-card {
	
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.category-card.active {
	border: 2rpx solid #1d4ed8;
}

.card-icon-container {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.industrial {
	background-color: #e0edff;
}

.entertainment {
	background-color: #d1fae5;
}

.hr {
	background-color: #ede9fe;
}

.more {
	background-color: #fef3c7;
}

.card-icon {
	width: 60rpx;
	height: 60rpx;
}

.card-content {
	flex: 1;
}

.card-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
}

.card-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

.card-arrow {
	width: 40rpx;
	height: 40rpx;
	transform: rotate(180deg);
	opacity: 0.5;
}
</style>
